<%--
  Created by IntelliJ IDEA.
  User: Yy
  Date: 2022/5/7
  Time: 8:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>主页一</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/css/plugins/font-awesome-4.7.0/css/font-awesome.css"
          media="all">
</head>
<style>
    .layui-top-box {
        padding: 40px 20px 20px 20px;
        color: #fff
    }

    .panel {
        margin-bottom: 17px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 15px
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 14px;
        color: inherit
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .main_btn > p {
        height: 40px;
    }
</style>
<script type="text/javascript">
    layui.use(['element', 'jquery'], function () {
        var element = layui.element, $ = layui.jquery;
        $(document).on("click", 'a', function () {
            if (!$(this)[0].hasAttribute("tab_id") || $(this).attr("tab_id") == '') {
                return;
            }
            var layid = $(this).attr("tab_id");
            var text = $(this).text();
            var dataurl = $(this).attr("data-url");
            var tabs = $(".layui-tab-title").children();
            var flag = true;   //判断右侧是否已经有了该选项卡，有了就不生成了
            $.each(tabs, function (i, item) {
                var tabid = $(item).attr("lay-id");
                if (tabid == layid) { //如果已经打开了这个标签
                    flag = false;
                }
            });
            if (flag) {
                element.tabAdd('mytab', {
                    title: text,
                    content: "<iframe frameborder=0 style='width:100%;height:100%;'  src='" + dataurl + "' />",
                    id: layid
                });
            }

            //让点击的选项卡选中
            element.tabChange('mytab', layid);
        });
    });

</script>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-orange">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">公告</span>
                                <h5>未读通知公告</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">${notNoticeRece}</h1>
                                <div class="stat-percent font-bold text-gray"><i class="layui-icon">&#xe664;</i>
                                </div>
                                <small>已读公告：${countNoticeRece}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">请假</span>
                                <h5>学生请假待批准</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">${countByTask}</h1>
                                <div class="stat-percent font-bold text-gray"><i class="layui-icon">&#xe69c;</i>
                                </div>
                                <small>已审批：${noByVar}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-blue">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">周报</span>
                                <h5>本周周报待提交</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">${countByWeekly}</h1>
                                <div class="stat-percent font-bold text-gray"><i class="layui-icon">&#xe6af;</i>
                                </div>
                                <small>已提交：${noByWeekly}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-green">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">记录</span>
                                <h5>月谈心记录(每周须提交五个)</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins">${countByChc}</h1>
                                <div class="stat-percent font-bold text-gray"><i class="layui-icon">&#xe60c;</i>
                                </div>
                                <small>已提交：${noByChc}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <ul class="layui-timeline">
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <c:forEach items="${noticelist}" var="nl">
                        <h3 style="color: #40AFFE" class="layui-timeline-title"><i
                                class="layui-icon layui-icon-date"></i>
                            <script>document.write("${nl.noticeTime}".substring(0, 10));</script>
                        </h3>
                        <p>
                                ${nl.title}
                            <br>${nl.content}
                        </p>
                    </c:forEach>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
</div>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
</body>
</html>
